<template>
  <PageMain>
    <template #header></template>
    <template #body>
      <div class="flex flex-col h-full overflow-hidden p-[24px]">
        <div
          class="w-full min-h-[200px] bg-gradient-to-b from-[#e8efff] to-white rounded-lg p-[24px] flex flex-row shrink-0"
        >
          <div class="flex flex-col justify-between mb-4 w-1/2">
            <div class="text-2xl text-[#394d73] leading-8 mb-4">科学研究数据资产</div>
            <AssetField label="资产编号" value="2021070100001" />
            <AssetField label="资产类别" value="无形资产" />
          </div>
          <div class="flex flex-row justify-end w-1/2 items-end">
            <div class="flex flex-row">
              <AssetCard label="账面价值" value="1000" :icon="QCYE" />
              <AssetCard label="已入表金额" value="1000" :icon="BQZJJE" />
            </div>
          </div>
        </div>
        <div class="overflow-auto">
          <a-tabs default-active-key="1">
            <a-tab-pane key="1" title="详情">
              <TableComponent />
            </a-tab-pane>
            <a-tab-pane key="2" title="减值报告"> </a-tab-pane>
            <a-tab-pane key="3" title="凭证"> Content of Tab Panel 2 </a-tab-pane>
          </a-tabs>
        </div>
      </div>
    </template>
  </PageMain>
</template>

<script lang="ts" setup>
import PageMain from '@/components/PageBox.vue';
import BQZJJE from '@/assets/images/amortize/bqzjje.png';
import QCYE from '@/assets/images/amortize/qcye.png';
import AssetField from '../../components/AssetField.vue';
import AssetCard from '../../components/AssetCard.vue';
import TableComponent from './TableComponent.vue';
</script>
